<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta name="referrer" content="no-referrer"/>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理</title>
  <link href="../static/images/favicon.ico" th:href="@{/images/favicon.ico}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../static/css/element-ui-index.css" th:href="@{/css/element-ui-index.css}">

</head>
<body class="admin-body">

<div id="app">
  <!--顶部栏-->
  <div class="container-fluid p-1 bg-dark text-white text-center">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/admin">添加博客</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/admin/manageBlog">管理博客</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/admin/sys-configs">配置信息管理</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/admin/tags">标签管理</a>
      </li>
    </ul>
  </div>


  <!--列表-->
  <div class="container mt-5">
    <div class="card">
      <div class="card-body">


        <el-table
                :data="list"
                stripe
                border
                style="width: 100%">
          <el-table-column
                  prop="id"
                  label="ID"
                  width="150">
          </el-table-column>

          <el-table-column
                  prop="title"
                  label="博客标题">
          </el-table-column>

          <el-table-column  label="标签" prop="tagList">
            <template slot-scope="scope">
              <el-tag class="ms-2" v-for="tag in scope.row.tagList" :key="tag.id" effect="plain">{{ tag.name }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
                  prop="description"
                  label="博客描述">
          </el-table-column>

          <el-table-column
                  prop="content"
                  label="博客内容"
                  show-overflow-tooltip>

          </el-table-column>

          <el-table-column
                  prop="createTime"
                  label="创建时间">
          </el-table-column>

          <el-table-column
                  prop="updateTime"
                  label="更新时间">
          </el-table-column>

          <el-table-column width="150" label="操作" >
            <template slot-scope="scope">
              <el-button  size="mini" @click="clickEdit(scope.row.id)">编辑</el-button>
              <el-button  size="mini" type="danger" @click="clickDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

        <!-- 分页 -->
        <el-pagination
                class="mt-5"
                @current-change="handleCurrentChange"
                :current-page="searchForm.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="searchForm.pageSize"
                :total="total"
        ></el-pagination>
      </div>
    </div>

  </div>


  <!-- 创建或编辑的表单 -->
  <el-dialog title="添加/编辑" :visible="dialogVisible" @close="dialogVisible = false" :close-on-click-modal="false">
    <!-- 表单内容 -->
    <el-form :model="editForm" label-width="150px">
      <!-- ID -->
      <el-form-item label="ID">
        <el-input v-model="editForm.id" disabled></el-input>
      </el-form-item>

      <el-form-item label="博客标题" prop="title">
        <el-input v-model="editForm.title"></el-input>
      </el-form-item>

      <el-form-item label="标签">
        <el-select class="w-100"  v-model="editForm.tagIds" multiple placeholder="标签" >
          <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="博客描述" prop="description">
        <el-input v-model="editForm.description"></el-input>
      </el-form-item>

      <el-form-item label="博客内容" prop="content">
        <el-input
                type="textarea"
                :rows="8"
                placeholder="请输入内容"
                v-model="editForm.content">
        </el-input>
      </el-form-item>

    </el-form>
    <!-- 按钮操作 -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clickSave">保存</el-button>
      </span>

  </el-dialog>

</div>
</body>

<script src="../../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<!-- import Vue before Element -->
<script src="../../static/lib/vue.js"                   th:src="@{/lib/vue.js}"></script>
<!-- import JavaScript -->
<script src="../../static/lib/element-ui-index.js"      th:src="@{/lib/element-ui-index.js}"></script>
<script src="../../static/lib/axios.min.js"             th:src="@{/lib/axios.min.js}"></script>
<script src="../../static/lib/axiosInstance.js"         th:src="@{/lib/axiosInstance.js}"></script>

<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        list: [],
        total: 0, // 总记录数
        searchForm: {
          pageNum: 1, // 当前页
          pageSize: 10  // 每页显示条数
        },
        // 表单显示
        dialogVisible: false,
        formLabelWidth: '120px',
        editForm:{

        },
        tagList:[],
      }

    },
    methods:{
      //获取分页数据
      fetchPage(){
        axiosInstance.get(`/admin/manageBlog/page`,{
          params: this.searchForm
        }).then(res => {
          if (res.code === 20000){
            this.list = res.data.page.list;
            this.total = res.data.page.total;
          }

        })
      },
      // 分页切换
      handleCurrentChange(currentPage) {
        this.searchForm.pageNum = currentPage;
        this.fetchPage();
      },
      clickSave(){
        if (this.editForm.id) {
          // 有ID  更新
          axiosInstance.put(`/admin/manageBlog`, this.editForm)
                  .then(resp => {
                    if(resp.code === 20000){
                      this.$message.success('更新成功');
                      this.dialogVisible = false;
                      this.fetchPage();
                    }

                  })
                  .catch(error => {
                    console.error(error);
                  });
        }
      },
      // 获取标签
      fetchTagList(){
        axiosInstance.get(`/admin/tags/all`).then(res => {
          if (res.code === 20000){
            this.tagList = res.data.tagList;
          }
        })
      },
      // 编辑
      clickEdit(id) {
        axiosInstance.get(`/admin/manageBlog/${id}`)
                .then(resp => {
                  this.editForm = resp.data.blog
                })

        this.dialogVisible = true;
      },
      //点击删除
      clickDelete(id){
        this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.delete(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      // 删除
      delete(id) {
        axiosInstance.delete(`/admin/manageBlog/${id}`)
                .then(() => {
                  this.fetchPage();
                })
                .catch(error => {
                  console.error(error);
                });
      },
      logout(){
        axiosInstance.get('/admin/logout').then(res => {
          if (res.code === 20000){
            location.href = "/admin";
          }
        })
      }

    },

    mounted(){
      this.fetchPage()
      this.fetchTagList()
    }
  })



</script>

</html>
